<template>
  <el-space>
    <el-button type="primary" style="margin: 6px 0px 6px 10px" size="small">新增列</el-button>
    <el-button type="danger" style="margin: 6px 0px" size="small">删除列</el-button>
  </el-space>

  <el-table :data="columnList" border class="table">
    <el-table-column type="index" width="40" />
    <el-table-column type="selection" width="40" :selectable="selectable" />
    <el-table-column prop="formStandard" label="结构字段" width="100" align="center">
      <template #default="{ row }">
        <el-tag v-if="row.structureColumn === 1" type="info">是</el-tag>
        <el-tag v-else type="danger">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="formStandard" label="引用标准" width="100">
      <template #default="{ row }">
        <el-select v-model="row.formStandard" :show-arrow="false" :offset="2" :disabled="row.structureColumn === 1">
          <el-option key="1" label="是" :value="1" />
          <el-option key="0" label="否" :value="0" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="columnName" label="字段名称" width="220">
      <template #default="{ row }">
        <el-input v-model="row.columnName" v-if="row.formStandard === 0" :clearable="true" :disabled="row.structureColumn === 1"></el-input>

        <el-select
          v-else
          v-model="row.columnName"
          filterable
          remote
          reserve-keyword
          :show-arrow="false"
          :offset="5"
          :remote-method="remoteMethod"
          :loading="loading"
          :clearable="true"
          :disabled="row.structureColumn === 1"
          @change="columnChange(row.columnName, row)"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.value">
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
              {{ item.label }}
            </span>
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="dataType" label="数据类型" width="120">
      <template #default="{ row }">
        <el-select v-model="row.dataType" :show-arrow="false" :offset="2" :disabled="row.formStandard === 1 || row.structureColumn === 1">
          <el-option key="varchar" label="varchar" value="varchar" />
          <el-option key="char" label="char" value="char" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="digitLength" label="长度" width="80">
      <template #default="{ row }">
        <el-input v-model="row.digitLength" :clearable="true" :disabled="row.formStandard === 1 || row.structureColumn === 1"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="numberScale" label="小数位" width="80">
      <template #default="{ row }">
        <el-input v-model="row.numberScale" :clearable="true" :disabled="row.formStandard === 1 || row.structureColumn === 1"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="columnKey" label="键信息" width="100">
      <template #default="{ row }">
        <el-select v-model="row.columnKey" :show-arrow="false" :offset="2" :disabled="row.formStandard === 1 || row.structureColumn === 1">
          <el-option key="NONE" label="无" value="NONE" />
          <el-option key="PRI" label="主键" value="PRI" />
          <el-option key="UNI" label="唯一键" value="UNI" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="columnComment" label="备注">
      <template #default="{ row }">
        <el-input v-model="row.columnComment" :clearable="true" :disabled="row.structureColumn === 1"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="operator" label="操作" align="center" width="200">
      <template #default="{ row }">
        <el-space v-if="row.structureColumn === 0">
          <el-button type="primary" link @click="onAddColumn(row)">往前新增</el-button>
          <el-button type="primary" link>往后新增</el-button>
          <el-button type="danger" link @click="onDelete(row)">删除</el-button>
        </el-space>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumnInfo } from '../database-table';
import { dwHttp } from '@/utils/http';
defineOptions({
  name: 'DatabaseColumnTable',
});

interface ListItem {
  value: string;
  label: string;
}

const options = ref<ListItem[]>([]);
const loading = ref(false);
const optionsCache: Record<string, IColumnInfo> = {};

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true;
    dwHttp({
      method: 'get',
      isSuccessTip: false,
      url: '/admin-api/modeling/database/column/standard/list',
      params: {
        keyword: query,
      },
    }).then((res) => {
      const data = res.data as unknown as IColumnInfo[];
      options.value = [];
      for (let i = 0; i < data.length; i++) {
        options.value.push({ label: data[i].columnComment!, value: data[i]['columnName'] });
        optionsCache[data[i]['columnName']] = data[i];
      }
      loading.value = false;
    });
  } else {
    options.value = [];
  }
};

const columnChange = (value: string, row: IColumnInfo) => {
  if (value) {
    const cacheData = optionsCache[value];
    row.columnComment = cacheData['columnComment'];
    row.dataType = cacheData['dataType'];
  } else {
    row.dataType = '';
    row.columnComment = '';
  }
};

const columnList = ref<IColumnInfo[]>([
  {
    id: '222',
    structureColumn: 1,
    formStandard: 1,
    columnName: 'id',
    dataType: 'varchar',
    digitLength: 255,
    required: 1,
    columnKey: 'PRI',
    columnComment: '主键',
  },
  {
    id: '111',
    structureColumn: 0,
    columnName: '',
    dataType: '',
    required: 1,
    columnComment: '',
  },
  {
    id: '333',
    structureColumn: 0,
    formStandard: 1,
    columnName: 'id',
    dataType: 'varchar',
    digitLength: 255,
    required: 1,
    columnKey: 'NONE',
    columnComment: '',
  },
]);
const onDelete = (rowdata: IColumnInfo) => {
  console.log(rowdata);
};
const selectable = (row: IColumnInfo) => row.structureColumn === 0;

const setStructureType = (value: string) => {
  columnList.value.push({
    id: '111',
    structureColumn: 1,
    formStandard: 1,
    columnName: 'id',
    dataType: 'varchar',
    digitLength: 255,
    required: 1,
    columnKey: 'PRI',
    columnComment: '主键',
  });
  console.log(value);
};
const onAddColumn = (row: IColumnInfo) => {
  alert(JSON.stringify(row));
};
defineExpose({ setStructureType });
</script>
<style lang="scss" scoped>
.table {
  width: 100%;

  :deep(.el-table) {
    border-top: 0;
  }
  :deep(tbody .cell) {
    padding: 0;
  }
  :deep(tbody .el-table__cell) {
    text-align: center;
    padding: 0;
  }
  /* 输入框的样式 */
  :deep(.el-input__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 选择框的样式 */
  :deep(.el-select__wrapper) {
    box-shadow: none !important; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
  }
  /* 鼠标悬停时的样式 */
  :deep(.el-input__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary); /* 鼠标悬停时下边框高亮 */
  }
  :deep(.el-select__wrapper:hover) {
    border-bottom: 1px solid var(--el-color-primary) !important; /* 鼠标悬停时下边框高亮 */
  }
  /* 聚焦时的样式 */
  :deep(.el-input__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
  :deep(.el-select__wrapper:focus) {
    border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
  }
}
</style>
